<template>
	<view class="bodyClass">
		<view class="textClass">订单号：{{orderInfo.orderNo}}</view>
		<view class="textClass">重量：{{orderInfo.zhongliang}} kg</view>
		<view class="textClass">体积：{{orderInfo.tiji}} m³</view>
		<view class="textClass">品类：{{orderInfo.pinlei}}</view>
		<view class="textClass">是否特殊：{{orderInfo.isTeshu === '0' ? '否' : '是'}}</view>
		<view class="textClass">运费：{{orderInfo.amount}} 元</view>
		<view class="textClass">起点位置：{{orderInfo.startAddress}}</view>
		<view class="textClass">终点位置：{{orderInfo.endAddress}}</view>
		<view class="textClass">订单状态：{{orderInfo.status === 1 ? '未接单' : 
			orderInfo.status === 2 ? '进行中' : 
			orderInfo.status === 3 ? '已送达' : 
			orderInfo.status === 4 ? '已取消' : ''}}</view>
		<map ref="map" id="map" style="width: 100%;height: 300px;"></map>
		<view class="buttonClass">
			<button v-if="isRole === 1 && orderInfo.status === 2" @click="callPhone(1)">打电话给司机</button>
			<button v-if="isRole === 1 && orderInfo.status <= 2" @click="quxiao">取消订单</button>
			<button v-if="isRole === 2 && orderInfo.status === 1" @click="jiedan">接单</button>
			<button v-if="isRole === 2" @click="daohang">导航</button>
			<button v-if="isRole === 2 && (orderInfo.status === 2 || orderInfo.status === 3)" @click="callPhone(2)">打电话给用户</button>
			<button v-if="isRole === 2 && orderInfo.status === 2" @click="songda">已送达</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderInfo: {},
				isRole: 0,
				token: '',
				httpUrl: 'http://192.168.31.178:8084/api',
			}
		},
		onLoad(option) {
			var info = option.item
			console.log('0000:',info)
			if(info){
				this.orderInfo = JSON.parse(info)
				var isRole = uni.getStorageSync('isRole');
				var token = uni.getStorageSync('token');
				console.log('token11111:',token)
				if(token){
					this.token = token
				} else {
					uni.showToast({title:'请先登录',icon:'error',duration: 2000})
					uni.navigateTo({
					    url: '/pages/login/login'
					});
				}
				console.log(isRole)
				if(isRole){
					this.isRole = isRole;
				}
			}
		},
		onReady() {
			this.getDrivingRoute()
		},
		methods: {
			 getDrivingRoute() {
				 var starts = this.orderInfo.startLatLon.split(',')
				 var ends = this.orderInfo.endLatLon.split(',')
				 var mapContext = uni.createMapContext('map',this)
				 var map = mapContext.$getAppMap();
				 console.log('map:',map)
				 var searchObj = new plus.maps.Search( map );
				 searchObj.onRouteSearchComplete = function ( state, result ) {
					if ( state == 0 ) {
						if ( result.routeNumber <= 0 ) {
							alert( "没有检索到结果" );
						}
						for(var i=0; i<result.routeNumber; i++){
							map.addOverlay( result.getRoute( i ) );
						}
					} else {
						alert( "检索失败" );
					}
				}
				var dst = new plus.maps.Position(new plus.maps.Point(starts[1] , starts[0])); // 天安门
				var src = new plus.maps.Position(new plus.maps.Point(ends[1] ,ends[0])); // 大钟寺
				searchObj.drivingSearch( this.orderInfo.startAddress, dst.city, this.orderInfo.endAddress, src.city );
				if(this.orderInfo.sijiAddress && this.orderInfo.status === 2){
					var siji = this.orderInfo.sijiAddress.split(',')
					var marker = new plus.maps.Marker(new plus.maps.Point(siji[1],siji[0]));
					marker.setIcon("/static/app-plus/location@3x.png");
					marker.setLabel("司机位置");
					map.addOverlay(marker);
				}
			},
			quxiao(){
				var that = this
				uni.request({
					url: that.httpUrl + '/order/updateStatus?id=' + that.orderInfo.id + '&status=4',
					method: 'GET',
					header: {
						'like-token':that.token
					},
					success(res) {
						console.log('quxiao:',res)
						if (res.data.code !== 1) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else{
							uni.showToast({title:'取消成功',duration: 2000})
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			songda(){
				var that = this
				uni.request({
					url: that.httpUrl + '/order/updateStatus?id=' + that.orderInfo.id + '&status=3',
					method: 'GET',
					header: {
						'like-token':that.token
					},
					success(res) {
						if (res.data.code !== 1) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else{
							uni.request({
								url: that.httpUrl + '/order/detail?id=' + that.orderInfo.id,
								method: 'GET',
								header: {
									'like-token':that.token
								},
								success(res) {
									console.log('res11:',res)
									if (res.data.code !== 200) {
										uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
										return
									} else{
										that.orderInfo = res.data.data
									}
								},
								fail(err) {
									console.log('res11:',err)
									uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
								}
							})
							uni.showToast({title:'订单已送达',duration: 2000})
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			daohang(){
				var starts = this.orderInfo.startLatLon.split(',')
				var ends = this.orderInfo.endLatLon.split(',')
				// 设置目标位置坐标点和其实位置坐标点
				var dstcity = new plus.maps.Position(new plus.maps.Point(starts[1] , starts[0])); // 天安门
				var dst = new plus.maps.Point(starts[1] , starts[0]); // 天安门
				var src = new plus.maps.Point(ends[1] ,ends[0]); // 大钟寺
				// 调用系统地图显示 
				plus.maps.openSysMap( dst, dstcity.city, src );
			},
			callPhone(type){
				var phone = ''
				if(type === 1){//给司机打电话
					phone = this.orderInfo.userPhone
				} else {//给用户打电话
					phone = this.orderInfo.sijiUserPhone
				}
				console.log(phone,':phone')
				plus.device.dial(phone, true); 

			},
			jiedan(){
				var that = this
				uni.request({
					url: this.httpUrl + '/order/jiedan?id=' + that.orderInfo.id,
					method: 'GET',
					header: {
						'like-token':this.token
					},
					success(res) {
						uni.showToast({title:'接单成功',duration: 2000})
						uni.request({
							url: that.httpUrl + '/order/detail?id=' + that.orderInfo.id,
							method: 'GET',
							header: {
								'like-token':that.token
							},
							success(res) {
								console.log('res11:',res)
								if (res.data.code !== 200) {
									uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
									return
								} else{
									that.orderInfo = res.data.data
								}
							},
							fail(err) {
								console.log('res11:',err)
								uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
							}
						})
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			}
		}
	}
</script>

<style>
.bodyClass{
	padding: 10px;
}	
.textClass{
	font-size: 16px;
}
.buttonClass{
	display: flex;
	flex-direction: row;
	position: fixed;
	bottom: 50px;
	width: 100%;
	font-size: 16px;
}
</style>
